<template>
  <div class="system setting-system-mail absolute inset-0 flex flex-col">
    <BPageHeader name="System" :isView="false" icon="system|png">
      <template v-slot:action>
        <BRouterTab :options="tabs" v-model="activeQuery" />
      </template>
    </BPageHeader>

    <Fa v-if="activeQuery === '2fa'" />
    <ZContainer :noBorder="true" v-if="activeQuery === 'holidays'">
      <Holiday />
    </ZContainer>

    <ZContainer
      :noPadding="true"
      :noBorder="true"
      class="mail"
      v-loading="loading"
      v-if="activeQuery === 'mail'"
    >
      <div class="overflow-auto" style="padding-right: 16px">
        <Mail></Mail>
      </div>
    </ZContainer>
  </div>
</template>
<script>
import systemIcon from '@/assets/img/system.png'
import ZContainer from '@/components/storybook/z-container'
import BRouterTab from '@/components/storybook/b-router-tab/index'

import BPageHeader from '@/components/storybook/b-page-header/index'
import { tabs } from './index.schema'
import Mail from './mail'
import Fa from './fa'
import Holiday from './holiday'

export default {
  components: {
    BRouterTab,
    BPageHeader,
    Fa,
    ZContainer,
    Holiday,
    Mail
  },
  data() {
    return {
      systemIcon,
      loading: false,
      result: {},
      connectionloading: false,

      activeQuery: null
    }
  },
  created() {
  },
  computed: {
    tabs() {
      console.log(this.$store.state.system.loginRouter === '/login')
      return tabs.filter(i => {
        if (this.$store.state.system.loginRouter === '/login') {
          return i.value !== '2fa'
        }

        if (i.value === '2fa') {
          return this.$hasPermission('sys:system:2fa')
        }

        return true
      })
    }
  },
  watch: {
    tabs: {
      handler() {
        this.activeQuery = this.tabs.length ? this.tabs[0].value : null
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
.setting-system-mail {
  .link-item {
    font-size: 14px;
    font-weight: 600;
    color: #262626;
    margin-left: 28px;
    &.headerLink {
      color: #0043ce;
      cursor: pointer;
    }
  }

  ::v-deep .el-form-item {
    margin-bottom: 0px;
    &__content {
      line-height: auto;
    }
    &.subtitle-text {
      margin-bottom: 5px !important;
    }
    &.describe-text {
      margin-top: 5px !important;
    }
    .el-checkbox {
      margin-bottom: -6px;
    }
  }
}
.mail {
  padding: 4px 0 4px 16px;
}
</style>
